<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Vue Router -->
    <script src="https://unpkg.com/vue-router@4"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script> 

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body, html { height: 100%; overflow: hidden; font-family: Arial, sans-serif; background-color: #f8f9fa; }

        #app { display: flex; flex-direction: column; height: 100vh; }

        /* 顶部栏 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f5f5f5;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
            height: 60px;
        }
        .header .left { display: flex; align-items: center; }
        .header .left .title { margin-left: 10px; font-size: 18px; font-weight: bold; }
        .header .right { display: flex; align-items: center; }

        /* 侧边栏 */
        .sidebar {
            width: 200px; 
            background-color: white;
            transition: width 0.3s;
            overflow: hidden;
            height: 100%;
        }
        .sidebar.collapsed { width: 64px; }
        .sidebar .el-menu { height: 100%; border-right: none; background: #f5f5f5; }

        /* 中部区域 */
        .main-container { display: flex; flex: 1; overflow: hidden; }
        .content { flex: 1; padding: 20px; overflow-y: auto; background-color: white; }

        /* 底部栏 */
        .footer {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
            font-size: 14px;
            color: #666;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部栏 -->
        <div class="header">
            <div class="left">
                <el-icon @click="toggleSidebar" size="24" style="cursor: pointer;">
                    <component :is="isCollapsed ? Expand : Fold" />
                </el-icon>
                <span class="title">后台管理系统</span>
            </div>
            <div class="right">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <el-avatar :size="30" src="https://via.placeholder.com/30"></el-avatar>
                        <span class="username">{{ username }}</span>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
                            <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>

        <!-- 中部区域 -->
        <div class="main-container">
            <!-- 侧边栏 -->
            <div :class="['sidebar', { collapsed: isCollapsed }]">
                <el-menu :collapse="isCollapsed" :default-active="activeMenu"  @select="handleMenuSelect">
                    <el-menu-item index="/home">
                        <el-icon><component :is="House" /></el-icon><span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/users">
                        <el-icon><component :is="User" /></el-icon><span>用户管理</span> 
                    </el-menu-item>
                </el-menu>
            </div>

            <!-- 内容区域 -->
            <div class="content">
                <router-view></router-view>
            </div>
        </div>

        <!-- 底部栏 -->
        <div class="footer">© 2024 项目团队</div>
    </div> 
     
    <!-- Vue 代码 -->
    <script type="module">
        const { createApp, ref, onMounted, watch } = Vue; 
        const { createRouter, createWebHashHistory } = VueRouter;
        const { ElMessage } = ElementPlus;
        const { Fold, Expand, House, User } = ElementPlusIconsVue; 
         
        import Home from "/static/js/home.js";
        import Users from "/static/js/userpage.js";

        const loadTemplate = async (url) => {
            try {
                const response = await fetch(url);
                return await response.text();
            } catch (error) {
                console.error('加载模板失败:', error);
                return '<p>加载失败，请稍后重试。</p>';
            }
        };  
        const routes = [
            { path: '/home', component: Home },
            { path: '/users', component: Users }
        ];

        const router = createRouter({
            history: createWebHashHistory(), 
            routes
        }); 
        
        const app = createApp({
            setup() {
                const isCollapsed = ref(false);
                const username = ref('Admin');  

                const activeMenu = ref('/home');

                const toggleSidebar = () => {
                    isCollapsed.value = !isCollapsed.value;
                };

                const handleMenuSelect = (index) => {
                    activeMenu.value =  index;
                    router.push(index);
                };

                const goToProfile = () => {
                    ElMessage.info('进入个人中心');
                };

                const logout = () => {
                    localStorage.removeItem('username');
                    localStorage.removeItem('password');
                    localStorage.removeItem('expires'); 
                    ElMessage.success('已退出登录');
                    window.location.href = '/index.html';  
                };

                const checkLoginData = () => { 
                    const username = localStorage.getItem('username');
                    const password = localStorage.getItem('password');
                    const expires = localStorage.getItem('expires');

                    if (username && password && expires) {
                        const expiresDate = new Date(parseInt(expires));
                        const now = new Date();
                        if (now < expiresDate) return { username, password };
                    }
                    return null;
                };

                onMounted(() => {  
                    const loginData = checkLoginData(); 

                    if (loginData && loginData.username !== '') {
                        ElMessage.success('欢迎 ' + loginData.username);

                        // 通过 window.location.hash 获取 URL 的 hash 路径
                        let currentPath = window.location.hash.replace('#', '') || '/home';

                        console.log('当前路径:', currentPath);

                        // 只有当路径是 '/' 或为空时，才默认跳转到 /home
                        if (currentPath === '/' || currentPath === '') {
                            router.push('/home');
                            activeMenu.value = '/home';
                        } else {
                            activeMenu.value = currentPath;
                        }
                        console.log("当前路由1:", activeMenu.value);
                    } else {
                        window.location.href = '/index.html';
                    }
                }); 


                watch(() => router.currentRoute.value.path, (newPath) => {
                    console.log("当前路由:", newPath);
                    activeMenu.value = newPath; // 确保 activeMenu 同步更新
                });

                return {
                    isCollapsed,
                    username,
                    activeMenu,
                    toggleSidebar,
                    handleMenuSelect,
                    goToProfile,
                    logout,
                    Fold, Expand, House, User
                };
            }
        });

        app.use(router);
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>
